<template>
  <div class="admin-page">
    <div class="header">
      <img src="../../assets/images/logo.png"/>
      福州大学服务外包与软件设计实验室博客管理平台
    </div>
    <div class="bread">
      <ul>
        <li><RouterLink to="/admin">文章</RouterLink></li>
        <li><RouterLink to="/admin/users">用户</RouterLink></li>
        <li><RouterLink to="/admin/tags">标签</RouterLink></li>
        <li><RouterLink to="/admin/basic">统计</RouterLink></li>
      </ul>
      <div class="search">
        <Search style="width: 1.4em; height: 1.4em; margin-right: 15px; color: rgb(2, 106, 250);" />
        <div>
          <input
            v-model="searchInput"
            placeholder="请输入搜索关键词"
            placeholder-class="input-placeholder"
            @input="search"
          />
        </div>
      </div>
    </div>
    <div class="bread2">
      <el-form :inline="true" style="margin-left: 30px;">
        <el-form-item label="时间:" prop="time">
          <el-radio-group v-model="timeType">
            <el-radio value="1">本年度</el-radio>
            <el-radio value="2">当季</el-radio>
            <el-radio value="3">当月</el-radio>
            <el-radio value="4">当日</el-radio>
            <el-radio value="5">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="timeType === '5'">
          <el-date-picker
            v-model="dateTimeRange"
            style="width: 400px"
            type="datetimerange"
            is-range
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,watch,onMounted } from 'vue';
import { useTimeStore } from '@/stores/time';

const timeStore = useTimeStore();
const searchInput = ref('')
const timeType = ref('2')
const dateTimeRange = ref([])

function search(){
  console.log('搜索')
}

watch(timeType, (newVal) => {
  if (newVal === '5') {
    timeStore.startTime = dateTimeRange.value[0] || '';
    timeStore.endTime = dateTimeRange.value[1] || '';
  } else {
    const { begin, end } = calculateTimeRange(newVal);
    timeStore.startTime = begin;
    timeStore.endTime = end;
    timeStore.dateTimeRange = [];
  }
});

const calculateTimeRange = (type: string) => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1; // 月份从0开始，需+1
  const day = now.getDate();

  const format = (num: number) => num.toString().padStart(2, '0');
  switch (type) {
    case '1': // 本年度：1月1日 00:00:00 至 12月31日 23:59:59
      return {
        begin: `${year}-01-01 00:00:00`,
        end: `${year}-12-31 23:59:59`,
      };
    case '2': // 当季：当前季度第一天 00:00:00 至 最后一天 23:59:59
      const quarter = Math.floor((month - 1) / 3) + 1; // 1-4季度
      const startMonth = (quarter - 1) * 3 + 1;
      const endMonth = quarter * 3;
      // 计算季度最后一天（如3月→31日，6月→30日）
      const endDay = new Date(year, endMonth, 0).getDate();
      return {
        begin: `${year}-${format(startMonth)}-01 00:00:00`,
        end: `${year}-${format(endMonth)}-${format(endDay)} 23:59:59`,
      };
    case '3': // 当月：1日 00:00:00 至 当月最后一天 23:59:59
      const lastDayOfMonth = new Date(year, month, 0).getDate(); // 当月最后一天
      return {
        begin: `${year}-${format(month)}-01 00:00:00`,
        end: `${year}-${format(month)}-${format(lastDayOfMonth)} 23:59:59`,
      };
    case '4': // 当日：00:00:00 至 23:59:59
      return {
        begin: `${year}-${format(month)}-${format(day)} 00:00:00`,
        end: `${year}-${format(month)}-${format(day)} 23:59:59`,
      };
    default:
      return { begin: '', end: '' };
  }
};

onMounted(async() => {
   const { begin, end } = calculateTimeRange(timeType.value);
   timeStore.startTime = begin
   timeStore.endTime = end
})
</script>

<style scoped>
@import url('./AdminPage.css');
</style>
